<template>
  <div class="role-container list-page">
    <el-card>
      <div>
        <div class="list-h">
          <el-button
            type="primary"
            @click="handleAdd"
            class="add-option"
            v-auth="`/projectsA/role--add`"
            >添加角色</el-button
          >
        </div>

        <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
          <el-table
            :data="tableData"
            stripe
            style="width: 100%; margin-top: 20px"
            v-loading="loading"
            :header-cell-style="{
              background: '#F7F9FD',
              color: '#000',
              height: '48px'
            }"
            :row-class-name="tableRowClassName"
          >
            <template #empty>
              <el-empty :image-size="150" description="暂无数据"></el-empty>
            </template>
            <el-table-column type="index" label="序号" width="50">
              <template v-slot="scope">
                <span>{{
                  (formInline.pageNum - 1) * formInline.pageSize +
                  scope.$index +
                  1
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="roleName"
              label="角色名称"
              width="110"
            ></el-table-column>
            <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
            <el-table-column
              prop="createUserName"
              label="创建人"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
            ></el-table-column>

            <el-table-column label="操作" width="186" fixed="right">
              <template #default="{ row }">
                <el-button
                  type="text"
                  @click="handleResource(row)"
                  v-auth="`/projectsA/role--resource`"
                  >权限分配</el-button
                >
                <el-button
                  type="text"
                  @click="handleEdit(row)"
                  v-auth="`/projectsA/role--edit`"
                  >编辑</el-button
                >
                <template v-if="row.roleMark === '2'">
                  <el-button
                    type="text"
                    v-auth="`/projectsA/role--delete`"
                    @click="showDeleteMessageBox(row)"
                    >删除</el-button
                  >
                </template>
              </template>
            </el-table-column>
          </el-table>
        </el-skeleton>
      </div>
      <re-pagination
        v-if="total > 0"
        :total="total"
        v-model:page="formInline.pageNum"
        v-model:limit="formInline.pageSize"
        @pagination="handleSearch"
      />
    </el-card>

    <el-drawer
      size="50%"
      v-model="drawer"
      :before-close="handleClose"
      destroy-on-close
      custom-class="demo-drawer"
    >
      <template #title>
        <div class="demo-drawer__header">
          {{ mode === "add" ? "添加角色" : "编辑角色" }}
        </div>
      </template>
      <div class="demo-drawer__content">
        <roleSet
          v-if="drawer"
          :mode="mode"
          :roleInfo="roleInfo"
          @emitClose="emitClose"
        />
      </div>
    </el-drawer>

    <el-drawer
      size="50%"
      v-model="drawer2"
      :before-close="handleClose"
      destroy-on-close
      custom-class="demo-drawer"
    >
      <template #title>
        <div class="demo-drawer__header">资源详情</div>
      </template>
      <div class="demo-drawer__content">
        <resource-set
          v-if="drawer2"
          :role-id="roleId"
          @closeDrawer="handleClose"
        />
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref } from "vue";
import { useRouter } from "vue-router";
import NotifMessage from "/@/utils/message/notification";
import { ElMessageBox } from "element-plus";
import RePagination from "/@/components/RePagination/index.vue";
import { deletethdRole, thdRoleList } from "/@/api/projects";
import roleSet from "./components/roleSet.vue";
import { storageLocal } from "/@/utils/storage";
import { ModeType, FormInlineType, RoleInfoType, StateType } from "./types";

export default {
  name: "permission",
  components: {
    roleSet,
    RePagination
  },
  setup() {
    let router = useRouter();
    let loading = ref<boolean>(false);
    let total = ref<number>(0);
    let drawer = ref<boolean>(false);
    let drawer2 = ref<boolean>(false);
    let mode = ref<ModeType>("add");
    let roleId = ref(null);
    let formInline = reactive<FormInlineType>({
      projectManageId: storageLocal.getItem("projectInfo")?.id,
      sectionId: "A",
      pageNum: 1,
      pageSize: 10
    });
    let state = reactive<StateType>({
      tableData: [],
      roleInfo: {} as RoleInfoType
    });

    //获取角色列表
    async function getTableData(obj: object = {}) {
      loading.value = true;
      try {
        const { code, data } = await thdRoleList(obj);
        if (code === 200) {
          state.tableData = data.list;
          total.value = data.rows;
        }
      } catch (err) {
        console.log(err);
      } finally {
        loading.value = false;
      }
    }

    const showDeleteMessageBox = row => {
      ElMessageBox.confirm("确定删除该条记录吗？", "", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
        iconClass: "el-icon-warning"
      })
        .then(() => {
          handleDelete(row);
        })
        .catch(() => {});
    };

    // 删除角色
    async function handleDelete(item) {
      try {
        const { code, message } = await deletethdRole({ id: item.id });
        if (code === 200) {
          NotifMessage.success(message);
          getTableData(formInline);
        } else {
          NotifMessage.error(message);
        }
      } catch (err) {
        console.log(err);
      }
    }

    // 打开添加人员弹窗
    const handleAdd = (): void => {
      drawer.value = true;
      mode.value = "add";
    };

    // 编辑角色
    const handleEdit = (row: RoleInfoType) => {
      drawer.value = true;
      mode.value = "edit";
      state.roleInfo = row;
    };

    // TODO刷新列表数据
    const emitClose = () => {
      window.location.reload();
    };

    const handleClose = () => {
      drawer.value = false;
      drawer2.value = false;
    };

    // 根据条件进行搜索
    const handleSearch = (): void => {
      getTableData(formInline);
    };

    const handleResource = row => {
      router.push({
        path: "/projectsA/proManage/permission/detail",
        query: {
          roleName: row.roleName,
          roleId: row.id
        }
      });
    };

    const tableRowClassName = ({ rowIndex }) => {
      if (rowIndex % 2 == 1) {
        return "odd-row";
      } else {
        return "";
      }
    };

    // 请求数据
    getTableData(formInline);
    return {
      ...toRefs(state),
      mode,
      roleId,
      drawer,
      drawer2,
      total,
      loading,
      formInline,
      handleAdd,
      handleDelete,
      handleEdit,
      emitClose,
      handleClose,
      handleSearch,
      handleResource,
      showDeleteMessageBox,
      tableRowClassName
    };
  }
};
</script>
<style>
.el-icon-warning {
  color: #e45d5d !important;
}
</style>
<style lang="scss" scoped>
.role-container {
  .demo-drawer {
    .demo-drawer__header {
      line-height: 58px;
      padding-left: 15px;
      font-size: 14px;
      font-weight: 600;
      color: #606266;
    }
    .demo-drawer__content {
      height: calc(100vh - 64px);
      width: 100%;
      border-top: 1px solid rgba(0, 21, 41, 0.15);
    }
  }
  :deep .el-drawer__header {
    margin-bottom: 0px;
    padding-top: 0;
  }
  :deep .el-drawer__body {
    padding: 0;
  }
}
:deep .el-table__row.odd-row {
  background: #fdfdff;
}
</style>
